import {
  Select as BaseSelect,
  type SelectProps as BaseSelectProps,
} from "@renderer/components/ui/base/select";
import { cn } from "@renderer/lib/utils";
import { isString } from "es-toolkit";
import type { ReactNode } from "react";
import type { Key } from "react-aria-components";
import { match } from "ts-pattern";

interface SelectItem {
  key: Key;
  text: string;
  prefix?: ReactNode | string;
}

interface SelectProps<T extends SelectItem> extends BaseSelectProps<T> {
  triggerClassName?: string;
}

export function Select<T extends SelectItem>({ ...props }: SelectProps<T>) {
  return (
    <BaseSelect className="gap-y-2" {...props}>
      <BaseSelect.Trigger
        className={cn(
          "inset-ring-transparent h-11 rounded-[10px] bg-setting text-setting-fg transition-none hover:inset-ring-transparent",
          props.triggerClassName,
        )}
      />
      <BaseSelect.List className="min-w-full" items={props.items}>
        {(item: T) => (
          <BaseSelect.Option
            className={cn(
              "flex cursor-pointer justify-between",
              "[&>[data-slot='check-indicator']]:order-last [&>[data-slot='check-indicator']]:mr-0 [&>[data-slot='check-indicator']]:ml-auto",
            )}
            key={item.key}
            id={item.key}
            textValue={item.text}
          >
            <div className="flex items-center gap-2">
              {match(item.prefix)
                .with(isString(item.prefix), (prefix) => (
                  <span className="text-sm">{prefix}</span>
                ))
                .otherwise(() => item.prefix)}

              <BaseSelect.Label>{item.text}</BaseSelect.Label>
            </div>
          </BaseSelect.Option>
        )}
      </BaseSelect.List>
    </BaseSelect>
  );
}
